<template>
  <div class="form-box">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="130px"
    >
      <el-form-item label="活动海报" prop="activityPoster">
        <uploadSingImg
          :imgUrl="ruleForm.activityPoster"
          accept=".jpg,.png"
          :maxSize="5"
          @getImgUrl="getImgUrl($event, 'activityPoster')"
        >
          <template v-slot:imgInfo>
            建议上传图片尺寸宽750px,高不低于1624px,png,jpg格式,尺寸最大5M
          </template>
        </uploadSingImg>
      </el-form-item>
      <el-form-item label="海报模板素材" prop="posterTemplateMaterial">
        <el-button type="success" @click="addSection">
          + 新增海报模板
        </el-button>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in ruleForm.posterTemplateMaterial"
        :key="index"
        prop="posterTemplateMaterial"
      >
        <uploadSingImg
          :imgUrl="item.templateImg"
          accept=".jpg,.jpeg,.png,.gif"
          :maxSize="5"
          @getImgUrl="getPosterTemplate($event, index)"
        >
          <template v-slot:imgInfo>
            建议上传图片尺寸宽750，高度不限，支持gif，尺寸最大5M
          </template>
        </uploadSingImg>
        <span>设置上下架时间：</span>
        <el-radio v-model="item.upDownFrameStatus" label="CLOSE">否</el-radio>
        <el-radio v-model="item.upDownFrameStatus" label="OPEN">是</el-radio>
        <div v-if="item.upDownFrameStatus == 'OPEN'">
          <el-date-picker
            size="small"
            v-model="item.setTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            @change="selectTime(item, index)"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </div>
        <div>
          <span>排序：</span>
          <el-input
            style="width:35%"
            @input="sortInput($event, index)"
            v-model.trim="item.sortNum"
            maxlength="2"
          ></el-input>
          <div class="tip">设置海报的排序，数字越小排序越靠前</div>
        </div>
        <span>海报分享语：{{ item.shareSign || '暂无' }}</span>
        <el-button
          size="mini"
          type="danger"
          style="margin-left:15px"
          icon="el-icon-delete"
          v-if="item.shareSign"
          @click="delShare(index)"
        >
          删除
        </el-button>
        <div>
          <el-button type="success" @click="addShare(index)">
            + 新增分享语
          </el-button>
        </div>
        <el-button
          size="mini"
          type="danger"
          style="position:absolute;top:140px;left:380px"
          icon="el-icon-delete"
          v-if="index !== 0"
          @click="delTemplate(index)"
          >删除</el-button
        >
      </el-form-item>
      <el-form-item label="活动按钮">
        <el-form-item label="新增上传作品按钮" prop="uploadWorksButton">
          <uploadSingImg
            :imgUrl="ruleForm.uploadWorksButton"
            accept=".png"
            :maxSize="5"
            @getImgUrl="getImgUrl($event, 'uploadWorksButton')"
          >
            <template v-slot:imgInfo>请您上传png格式图片</template>
          </uploadSingImg>
        </el-form-item>
        <el-form-item label="新增集赞按钮" prop="praiseButton">
          <uploadSingImg
            :imgUrl="ruleForm.praiseButton"
            accept=".png"
            :maxSize="5"
            @getImgUrl="getImgUrl($event, 'praiseButton')"
          >
            <template v-slot:imgInfo>请您上传png格式图片</template>
          </uploadSingImg>
        </el-form-item>
      </el-form-item>
    </el-form>
    <div class="handlerButton">
      <el-button type="success" @click="handelTab('generalConfig')">
        上一步
      </el-button>
      <el-button type="info" @click="cancel">取 消</el-button>
      <el-button type="success" @click="handelTab('userRules')">
        下一步
      </el-button>
    </div>
  </div>
</template>

<script>
import uploadSingImg from '@common/uploadSingImg'
export default {
  props: ['activityInfo'],
  components: { uploadSingImg },
  data() {
    return {
      ruleForm: {
        activityPoster: '', //活动海报
        uploadWorksButton: '', //上传作品按钮
        praiseButton: '', //点赞按钮URL
        posterTemplateMaterial: [
          {
            templateImg: '', //海报素材模板图片
            upDownFrameStatus: 'CLOSE', //是否开启状态
            setTime: [], //上下架时间
            upFrameTime: '', //上架时间
            downFrameTime: '', //下架时间
            sortNum: '', //排序号
            shareSign: '' //分享语
          }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      rules: {
        uploadWorksButton: [
          { required: true, message: '请上传作品按钮', trigger: 'change' }
        ],
        praiseButton: [
          { required: true, message: '请上传集赞按钮', trigger: 'change' }
        ],
        posterTemplateMaterial: [{ required: true }]
      }
    }
  },
  watch: {
    activityInfo: {
      handler(val) {
        this.ruleForm = this.activityInfo
      },
      deep: true
    }
  },
  methods: {
    /* 活动海报 */
    getImgUrl(url, type) {
      this.ruleForm[type] = url
      this.$refs['ruleForm'].validateField(type)
    },
    /* 新增模板 */
    addSection() {
      if (this.ruleForm.posterTemplateMaterial.length == 10) {
        this.$message.warning('最多添加10条档位')
        return
      }
      this.ruleForm.posterTemplateMaterial.push({
        templateImg: '', //海报素材模板图片
        upDownFrameStatus: 'CLOSE', //是否开启状态
        setTime: [], //上下架时间
        sortNum: '', //排序号
        shareSign: '' //分享语
      })
    },
    // 海报模板素材
    getPosterTemplate(url, index) {
      this.ruleForm.posterTemplateMaterial[index].templateImg = url
    },
    /* 选择上下架时间 */
    selectTime(item, index) {
      this.ruleForm.posterTemplateMaterial[index].upFrameTime = item.setTime[0]
      this.ruleForm.posterTemplateMaterial[index].downFrameTime =
        item.setTime[1]
    },
    /* 输入排序 */
    sortInput(val, index) {
      this.ruleForm.posterTemplateMaterial[index].sortNum = val.replace(
        /[^\d]/g,
        ''
      )
    },
    /* 新增分享语 */
    addShare(index) {
      this.$prompt('', '新增分享语', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(({ value }) => {
          this.ruleForm.posterTemplateMaterial[index].shareSign = value
        })
        .catch(() => {})
    },
    /* 删除分享语 */
    delShare(index) {
      this.ruleForm.posterTemplateMaterial[index].shareSign = ''
    },
    /* 删除模板 */
    delTemplate(index) {
      this.ruleForm.posterTemplateMaterial.splice(index, 1)
    },
    /* 提交 */
    collectData() {
      let obj = Object.assign({}, this.ruleForm)
      obj.posterTemplateMaterial.forEach((item) => {
        if (item.templateImg === '') {
          this.$message.warning('请上传素材模板图片')
          obj = { tab: 'customConfig' }
        } else if (item.upDownFrameStatus === 'OPEN' && !item.setTime.length) {
          this.$message.warning('请设置上下架时间')
          obj = { tab: 'customConfig' }
        } else if (item.sortNum === '') {
          this.$message.warning('请设置排序号')
          obj = { tab: 'customConfig' }
        } else if (item.shareSign === '') {
          this.$message.warning('请设置分享语')
          obj = { tab: 'customConfig' }
        } else if (item.upDownFrameStatus === 'CLOSE') {
          item.upFrameTime = ''
          item.downFrameTime = ''
        } else if (item.upDownFrameStatus === 'OPEN') {
          item.upFrameTime = item.setTime[0]
          item.downFrameTime = item.setTime[1]
        }
      })
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) obj = { tab: 'customConfig' }
      })
      return obj
    },
    /* 下一步 */
    handelTab(name) {
      this.$emit('handleClick', { name })
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: 'wh:collectPraise:activityList' })
    }
  }
}
</script>
<style lang="less" scoped>
.handlerButton {
  width: 300px;
  margin: 0 auto;
  .el-button {
    margin-right: 30px;
  }
}
</style>
